<template>
  <div style="padding: 24px 0;">
    <router-link style="margin-left: 24px;" :to="{path:'/substitute/substituteApply'}"><a-button>调代课申请</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteApproval'}"><a-button>调代课审批</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteStatistics'}"><a-button>调代课统计</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteTeacherStatistics'}"><a-button>调代课统计（管理员）</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteSetting'}"><a-button>基础设置</a-button></router-link>
    <div class="attendance-tit">我的申请</div>
    <div class="line"></div>
    <div class="body">
      <div class="flow-form">
        <div class="flow-form-tit">审批人设置：</div>
        <div @click="ownerMemberModal = true" class="flow-form-desc">
          <div v-if="selectedTeacherList.length" class="ellipsis">
            <div class="item" v-for="(item,index) in selectedTeacherList" :key="item.userId">
              <span class="label">{{ item.userName }}<span v-if="index+1 != selectedTeacherList.length">、</span></span>
            </div>
          </div>
          <div v-else style="color: #c0bfbf;">请选择</div>
          <a-icon type="down" />
        </div>
      </div>
      <div class="flow-form-small">1. 申请调代课的老师找不到可以对调的课程或者代课的老师时，由学校设置负责人帮忙设置调课或代课</div>

      <div class="flow-form-vice">
        <div class="flow-form-vice-desc">多人审批时采取的审批方式</div>
        <a-radio :checked="orSignChecked" @change="orSignChange" class="flow-form-vice-radio">或签（其中一名审批人同意或拒绝即可）</a-radio>
        <a-radio :checked="jointlySignChecked" @change="jointlySignChange" class="flow-form-vice-radio" style="display: block;">会签（须所有审批人同意）</a-radio>
      </div>
      <a-checkbox v-model="selectChecked" @change="onChange" class="flow-form-big">选择“去调课、去代课、调为自修”时，除被调课老师、代课老师审批外，需要设置其他审批人进行最终审批</a-checkbox>

      <a-modal width="1000px" title="选择老师" :visible="ownerMemberModal" ok-text="保存" cancel-text="取消" @ok="getPunchersTxt()"
        @cancel="closeMemberModal()">
        <div style="display: flex;">
          <div class="btn-left checked-area" style="width: 50%; border-right: 1px solid #F2F4FA;padding: 24px;">
            <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
              <div class="item" v-for="(item,index) in selectedTeacherList" :key="item.userId">
                <span class="label">{{ item.userName }}</span>
                <a-icon class="icon" type="close" @click="delCheckedEvt(item.userId,index)"/>
              </div>
              <div v-if="!selectedTeacherList.length" style="color:#999999">暂无人员</div>
            </div>
          </div>
         <div style="padding: 24px;">
            <a-tree
              checkable
              v-model="checkedTeacherList"
              :tree-data="departemntList"
              @check="onTeacherChange"
              :replaceFields = "{
                children:'child',
                title:'name',
                key:'id'
              }"/>
          </div>
        </div>
      </a-modal>

    </div>
    <a-button type="primary" class="submit-btn" @click="submit">保存</a-button>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .attendance-tit {
    font-size: 16px;
    color: #333333;
    margin: 24px 0 24px 24px;
  }
  .line {
    height: 1px;
    background: #E5E5E5;
  }
  .body {
    padding: 24px;
  }
  .flow-form {
    display: flex;
    align-items: center;
    .flow-form-tit {
      display: flex;
      color: rgba(0, 0, 0, 0.85);
      width: 100px;
      justify-content: end;
    }

    .flow-form-desc {
      height: 32px;
      width: 570px;
      border: 1px solid #d9d9d9;
      border-radius:4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      .ellipsis {
        display: flex;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .flow-form-small {
    text-indent: 8em;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin-top: 8px;
  }
  .flow-form-big {
    text-indent: 7em;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .flow-form-vice {
    text-indent: 7em;
    margin: 32px 0;
    .flow-form-vice-desc {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
    .flow-form-vice-radio {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
  }
  .btn-left {
    width: 50%;
    border-right: 1px solid #F2F4FA;

    .btn-tit {
      font-size: 14px;
    }

    .tag-btn {
      display: flex;
      align-items: center;
    }

    .clear {
      color: #4174FD;
    }

    .btn-left-input {
      margin-top: 20px;
    }

    .btn-search {
      margin: 20px 0 20px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .checked-area {
    margin: 12px 0;
    .item {
      display: inline-flex;
      align-items: center;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background: #f2f4f5;
      margin: 6px 12px;
      margin-left: 0;
      border-radius: 4px;
      padding: 0 12px;
      user-select: none;
      color: #999;
      &:hover {
        color: #666;
        background: #e5e5e5;
      }

      .label {
        display: inline-block;
        max-width: 120px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        font-size: 14px;
        font-weight: 400;
        margin-right: 8px;
      }
      .icon {
        cursor: pointer;
      }
    }
  }
  .submit-btn {
    margin-left: 40px;
  }
</style>
<script>
  import AddTeacherTree from "@/components/addMember/addMember.vue";
  import moment from 'moment';
  import {
    tree,
    allTeacherAndTree,
    allTeacherAndTreeP,
    calendarInfo,
    teacherList,
  } from '@/api/tree'
  import {
    substituteConfSave,
    substituteConfGet
  } from '@/api/apply'
  export default {
    components: {AddTeacherTree},
    data() {
      return {
        departemntList: [],
        ownerMemberModal: false,
        selectedTeacherList: [],
        treeSelect: [],
        departmentArr: [],
        checkedTeacherList: [],
        teacherList: [],
        confParam: {
          approvalFinal: undefined,
          approvalList: [],
          approvalStatus: undefined
        },
        orSignChecked: false,
        jointlySignChecked: false,
        selectChecked: false,
      }
    },
    created() {
      this.getSetting()
      this.getMemberTreeData()
      // this.getModinMemberList();
    },
    methods: {
      getSetting() {
        substituteConfGet().then(response => {
          this.confParam.approvalFinal = response.data.approvalFinal
          this.selectChecked = response.data.approvalFinal == 0 ? false : true
          if (response.data.approvalFinal == 0) {
            this.orSignChecked = true
            this.confParam.approvalStatus = 0
          } else {
            this.jointlySignChecked = true
            this.confParam.approvalStatus = 1
          }
          this.confParam.approvalList = this.selectedTeacherList = response.data.approvalList
        })
      },
      getMemberTreeData () {
        allTeacherAndTreeP().then(response => {
          this.departemntList = response.data.personList
          // this.departemntList[0].child[0].child = this.departemntList[0].child[0].personList
        })
      },
      getPunchersTxt () {
        let str = ''
        if (this.selectedTeacherList.length) {
          this.selectedTeacherList.forEach(item => {
            str = str + ' ' + item.userName
          })
        }
        // console.log("str: ",str);
        // this.OwnerTxt = str
        this.ownerMemberModal = false
      },
      closeMemberModal () {
        this.ownerMemberModal = false
      },
      onTeacherChange(checkedValues, checkedNodes) {
        this.checkedTeacherList = checkedValues;
        let arr = [];
        checkedNodes.checkedNodesPositions.forEach((item) => {
          const { name, userId, userIndex, departmentId, child, personList } =
            item.node.data.props;
          if (!child || !personList) {
            arr.push({
              userName: name,
              userId,
              userIndex,
              departmentId,
              userType: "T",
            });
          }
        });
        this.selectedTeacherList = arr;
        console.log('selectedTeacherList',this.selectedTeacherList);
      },
      delCheckedEvt(userId,index) {
        const result = this.getParentIds(this.selectedTeacherList, userId)
        this.selectedTeacherList = this.selectedTeacherList.filter(
          (v) => v.userId !== userId
        );

        this.checkedTeacherList.splice(index,1);
        // this.checkedTeacherList.filter((v,i) => {
        //     return i+1 != index+1;
        // })
      },
      //查找所有父节点  返回id集合
      getParentIds(list, id) {
        for (let i in list) {
          if (list[i].id === id || list[i].userId === id) {
            return [];
          }
          if (list[i].children) {
            let node = this.getParentIds(list[i].children, id);
            if (node) {
              return node.concat(list[i].id);
            }
          }
        }
      },
      orSignChange(e) {
        if (!this.orSignChecked) {
          this.jointlySignChecked = false
          this.orSignChecked = true
          this.confParam.approvalStatus = 0
        }
      },
      jointlySignChange(e) {
        if (!this.jointlySignChecked) {
          this.jointlySignChecked = true
          this.orSignChecked = false
          this.confParam.approvalStatus = 1
        }
      },
      onChange(e) {
        this.confParam.approvalFinal = e.target.checked? 1 : 0
      },
      submit() {
        this.confParam.approvalList = this.selectedTeacherList
        substituteConfSave(this.confParam).then(response => {
          this.$message.success('保存成功')
          // this.substituteApplyDetailData = response.data
        })
        .catch((err) => {
          this.$message.error('保存失败')
        })
        console.log('执行');
      }
    },
  }
</script>
